<template>
<div class="platform-package views-container">
    <div class="wlm-table">
        <div class="wlm-table-header">
            <el-form ref="form" :model="form" size="small" label-width="80px" class="retail-form" label-position="right">
                <el-form-item label="批次号：" class="search">
                    <el-input v-model="form.batch_num" placeholder="请输入批次号" style="width:160px;"></el-input>
                </el-form-item>
                <el-form-item label="状态：" class="search">
                    <el-select v-model="form.status" placeholder="请选择状态">
                        <el-option label="等待执行" value="1"></el-option>
                        <el-option label="执行中" value="2"></el-option>
                        <el-option label="完成" value="3"></el-option>
                        <el-option label="导出失败" value="4"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="选择时间：" class="search">
                    <el-date-picker v-model="date" type="datetimerange" :default-time="['00:00:00', '23:59:59']" :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
                </el-form-item>
                <el-form-item label="" class="filter-btns">
                    <el-button type="primary" @click="searchList">搜索</el-button>
                    <el-button type="danger" @click="showAll">显示全部</el-button>
                </el-form-item>
            </el-form>
        </div>
        <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
            <el-input v-model="remark" placeholder="请输入备注" style="width:160px;"></el-input>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="updateReAll">确 定</el-button>
            </span>
        </el-dialog>

        <div class="wlm-table-content">
            <el-tabs type="card" v-model="statusTab" @tab-click="filesSerch">
                <el-tab-pane label="导出下载" name="0"></el-tab-pane>
                <el-tab-pane label="模板下载" name="1"></el-tab-pane>
            </el-tabs>
            <el-table v-if="muBan == 0" :data="tableData" @selection-change="handleSelectionChange" style="width: 100%;">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column prop="id" label="导出任务ID">
                </el-table-column>
                <el-table-column prop="batch_num" label="批次号">
                </el-table-column>
                <el-table-column prop="type_text" label="类型">
                </el-table-column>
                <el-table-column prop="remark" label="备注">
                </el-table-column>
                <el-table-column prop="create_time" label="任务创建时间">
                </el-table-column>
                <el-table-column prop="status_text" label="状态">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.status == 3" type="success" disable-transitions>{{scope.row.status_text}}</el-tag>
                        <el-tag v-if="scope.row.status == 2" type="warning" disable-transitions>{{scope.row.status_text}}</el-tag>
                        <el-tag v-if="scope.row.status == 1" disable-transitions>{{scope.row.status_text}}</el-tag>
                        <el-tag v-if="scope.row.status == 4" type="info" disable-transitions>{{scope.row.status_text}}</el-tag>
                        <el-progress style="position: absolute;left: 80px;top: 18px;" v-if="scope.row.status==2 && scope.row.type ==3" type="circle" :width="30" :stroke-width="1" :percentage="scope.row.speed"></el-progress>
                    </template>
                </el-table-column>
                <el-table-column prop="accomplish_time" label="任务完成时间">
                </el-table-column>
                <el-table-column prop="num" label="下载次数">
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button @click.native.prevent="downRow(scope.$index)" type="text" size="small" v-if="scope.row.status == 3">
                            下载
                        </el-button>
                        <div class="btn-line" v-if="scope.row.status == 3"></div>
                        <el-button class="wlm-text" type="text" @click="delTableItem(scope.row.id)">删除</el-button>
                        <div class="btn-line" v-if="scope.row.remark"></div>
                        <el-button class="wlm-text" type="text" @click="updateRemark(scope.row.id)">修改备注</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-table v-if="muBan == 1" :data="tableData" style="width: 100%;">
                 <!-- <el-table-column type="selection" width="55">
                </el-table-column> -->
                <el-table-column prop="name" label="类型">
                    <template slot-scope="scope">
                        {{scope.row.name}}
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button @click.native.prevent="downRowMo(scope.$index)" type="text" size="small">
                            下载
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination-content flex-row flex-justify-e flex-align-c">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4" :page-sizes="[10, 20, 50]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="totalList">
                </el-pagination>
            </div>
            <el-button v-if="muBan == 0" style="position: relative;top:-35px" type="primary" @click="deletAll()">批量删除</el-button>
        </div>
    </div>
</div>
</template>

<script>
import {
    downloadTask,
    downloadFile,
    downloadSpeed,
    downloadDelete,
    downloadRemarkUpdate
} from '@/api/setting'
export default {
    name: 'downloadCenter',
    components: {

    },
    data() {
        return {
            dialogVisible: false,
            multipleSelection: [],
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
            totalList: 0,
            tableData: [],
            pagination: {
                page: 1,
                list_rows: 10,
                pagesizes: [10, 20, 50],
                total: 0
            },
            date: '',
            form: {
                is_fixed: '',
                batch_num: '',
                end_time: '',
                start_time: '',
                status: '',
                page: 1,
                list_rows: 10,
                time: 0
            },
            currentPage4: 1,
            statusTab: 0,
            muBan: '',
            ids: [],
            remarkId: "",
            remark: '',
            timer: null
        }
    },
    mounted() {
        this.getDownloadTList()
    },
    beforeDestroy() {
        clearInterval(this.timer)
    },
    methods: {
        updateRemark(id) {
            this.dialogVisible = true
            this.remarkId = id
        },
        updateReAll() {
            downloadRemarkUpdate({
                id: this.remarkId,
                remark: this.remark
            }).then((res) => {
                if (res.data.code == 1) {
                    this.$message.success(res.data.msg)
                    this.getDownloadTList()
                } else {
                    this.$message.error(res.data.msg)
                }
                this.dialogVisible = false
            })
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
            let checkArr = this.multipleSelection; // multipleSelection存储了勾选到的数据
            let params = [];
            let self = this;
            checkArr.forEach((item) => {
                params.push(item.id); // 添加所有需要删除数据的id到一个数组，post提交过去
            });
            self.ids = params;
        },
        deletAll() {
            downloadDelete({
                ids: this.ids
            }).then(res => {
                if (res.data.code == 1) {
                    this.$message.success(res.data.msg)
                    setTimeout(() => {
                        this.getDownloadTList()
                    })
                }
            })
        },
        delTableItem(id) {
            var ids = []
            ids.push(id)
            downloadDelete({
                ids: ids
            }).then(res => {
                if (res.data.code == 1) {
                    this.$message.success(res.data.msg)
                    setTimeout(() => {
                        this.getDownloadTList()
                    })
                }
            })
        },
        filesSerch() {
            if (this.statusTab == 0) {
                this.muBan = 0
                this.form.is_fixed = 0;
                this.getDownloadTList();
            } else if (this.statusTab == 1) {
                this.muBan = 1
                this.form.is_fixed = 1;
                this.getDownloadTList();
            }
        },
        downRowMo(index) {
            location.href = this.tableData[index].path
        },
        getList(){
            downloadTask(this.form).then(res=>{
                 this.tableData = res.data.data.data;
                this.totalList = res.data.data.total;
            })
        },
        getOrderOutPutSpeed(item){
            downloadSpeed({id:item.id}).then(res => {
                if(res.data.code == 1){

                    if(res.data.data.speed == -1 || res.data.data.speed == 100){
                        this.getList();
                        return;
                    }
                    this.$set(item,'speed',res.data.data.speed)
                    setTimeout(()=>{this.getOrderOutPutSpeed(item);},3000)
                }
            })
        },
        getDownloadTList() {
            if (this.form.start_time && this.form.end_time) {
                this.form.time = 1
            }
            downloadTask(this.form).then(res => {
                this.tableData = res.data.data.data;
                this.totalList = res.data.data.total;
                console.log(this.tableData,'1233')
                if (this.statusTab == 0) {
                    this.tableData.forEach((item, index) => {
                        //订单类型并且是进行中的订单，进行进度查询
                        if (item.status == 2 && item.type == 3) {
                            this.getOrderOutPutSpeed(item);


                            //2222222222222222222222222222222222222222222
                            // this.timer = setInterval(() => {
                            //     downloadSpeed({
                            //         id: item.id
                            //     }).then(res => {
                            //         // speed的三种状态
                            //         if (res.data.data.speed == 1 || res.data.data.speed == -1 || res.data.data.speed == 100) {
                            //            setTimeout(()=>{
                            //              this.getList()
                            //             },1500)
                            //             this.tableData = this.tableData.map(item1 => {
                            //                 if (item1.status == 2 && item1.type == 3) {
                            //                     return {
                            //                         ...item1,
                            //                         speed: 100
                            //                     }
                            //                 }
                            //                 console.log("item1+++++++++++++++++",item1)
                            //                 return item1
                            //             })
                                        
                            //             clearInterval(this.timer)//清除器延时器
                            //             //  setTimeout(()=>{
                            //             //  this.$router.go(0)
                            //             // },1500)
                            //         } else {
                            //                 //  setTimeout(()=>{
                            //                 //     this.$router.go(0)
                            //                 // },1500)
                            //             this.tableData = this.tableData.map(item2 => {
                            //                 if (item2.status == 2 && item2.type == 3) {
                            //                     return {
                            //                         ...item2,
                            //                         speed: res.data.data.speed
                            //                     }

                            //                 }

                            //                 console.log("item2+++++++++++++++++",item2)
                            //                 return item2
                            //             })
                            //         }

                            //     })
                            // }, 3000)
                            //2222222222222222222222222222222222222222222
                            

                        }
                    })
                }

            })
        },
        showAll() {
            //初始化
            this.form.batch_num = '';
            this.form.end_time = '';
            this.form.start_time = '';
            this.form.status = '';
            this.form.page = 1;
            this.form.time = 0;
            this.date = []
            this.form.list_rows = 10;
            this.getDownloadTList()
        },
        downRow(index) {
            downloadFile({
                id: this.tableData[index].id
            }).then(res => {
                location.href = res.data.data
                this.getDownloadTList();
            })
        },
        searchList() {
            this.form.start_time = this.date[0] || ''
            this.form.end_time = this.date[1] || ''
            this.getDownloadTList();
        },
        handleSizeChange(val) {
            this.form.page = 1;
            this.form.list_rows = val;
            this.getDownloadTList();
        },
        handleCurrentChange(val) {
            this.form.page = val;
            this.getDownloadTList();
        }
    }
}
</script>

<style lang="scss" scoped>
.platform-package {}
</style>
